<!--
 * @Author: yaoling 1871883713@qq.com
 * @Date: 2022-10-20 18:11:21
 * @LastEditors: yaoling 1871883713@qq.com
 * @LastEditTime: 2022-12-06 16:03:49
 * @FilePath: \company-world\src\views\noticeManagement\components\noticeQuery.vue
 * @Description: 搜索
-->
<template>
  <section class="notice-management-box">
    <div class="notice-input">
      新闻名称:
      <el-input class="input" v-model="news_title" placeholder="请输入新闻词条的标题" />
    </div>
    <div class="query-reset">
      <el-button :icon="Search" color="#6C52EA" @click="onSearch">查询</el-button>
      <el-button :icon="Refresh" @click="onRefresh">重置</el-button>
    </div>
  </section>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { Search, Refresh } from '@element-plus/icons-vue'
const emit = defineEmits(['onSearch', 'onRefresh'])
const news_title = ref('')
/**
 * @desc:搜索
 */
const onSearch = () => {
  emit('onSearch', news_title.value)
}
/**
 * @desc:重置
 */
const onRefresh = () => {
  news_title.value = ''
  emit('onRefresh')
}
</script>

<style lang="less" scoped>
.notice-management-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 60px;
  padding: 8px 18px 8px 10px;
  box-sizing: border-box;
  background-color: #fff;
  border-radius: 8px;
  .notice-input {
    display: flex;
    align-items: center;
    padding: 0 0 0 8px;
    box-sizing: border-box;
    font-size: 14px;
    white-space: nowrap;
    .input {
      width: 220px;
      margin-left: 5px;
      font-size: 14px;
    }
  }
  .query-reset {
    .el-button {
      height: 28px;
      font-size: 13px;
    }
  }
}
</style>
